@charset "UTF-8";

@import "lib/global";

// Dialog

.pui-dialog {
    min-width: 120px;
    min-height: 120px;
    position: fixed;
    top: 10%;
    left: 25%;
    z-index: 1000;
    @include box-shadow(0 0 12px rgba(0, 0, 0 , 0.4)); 
    background: #fff;
    display: box;
    @include flexbox();
    @include flex-direction(column);
    @include flex-flow(column);
    @include user-select(none);
    -webkit-touch-callout: none;

    > header { 
        text-align: center;
        width: 100%;
        height: 38px;
        line-height: 38px;
        border-bottom: 1px solid #ddd;
        background: #fff;
        @include user-select(none); // 设置为无法选择文本
        -webkit-touch-callout: none; // 长按时不触发系统的菜单

        > strong {
            font-size: 16px;
            padding: 0 10px;

            > small { 
                padding-left: 10px;
            }
        }
    }

    &.pui-radius > header {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

    > .pui-close {
        margin: 0;
        padding: 0; 
        position: absolute;
        top: 11px;
        right: 11px;

        &.pui-circle { 
            padding: 2px 4px;
            border-radius: 50% !important;
            top: -10px;
            right: -10px;  
            border: none;
            background: #fff;
            box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);

            html.no-touch &:hover, &.hover {
                opacity: 1;
                box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
            }
        }
    }

    > .pui-close-circle {
        top: -10px;
        right: -10px;
        opacity: 1; 
    }

    > section {   
        overflow: auto;  
        -webkit-overflow-scrolling: touch;
        padding: 10px;
        box-flex: 1;
        @include flex(1);

        &.has-iframe { 
            overflow: hidden;
            -webkit-overflow-scrolling: touch;
            padding: 0;

            > iframe {
                width: 99.99%;
                height: 100%;
            }
        }
    }

    &.pui-radius > section, &.pui-radius > section.has-iframe > iframe {
        @include border-bottom-left-radius(4px);
        @include border-bottom-right-radius(4px);
    }

    > footer {
        width: 100%;
        height: 38px;
        line-height: 38px;
        border-top: 1px solid #ddd;

        > small { 
            padding: 0 10px;
        }
    }

    &[type="window"], &[type="iframe"] {
        min-width: 50%;
        min-height: 30%;
        left: 25%;
        top: 40%;

        > header {
            text-align: left;
            
            > strong {                

                > .fa {
                    margin-right: 7px;
                    vertical-align: middle;
                }
            }
        }

        > .pui-dialog-toolbar {
            position: absolute;
            top: 7px;
            right: 9px;

            > .fa  {
                font-size: 16px;
                opacity: 0.3;
                color: #000;
                cursor: pointer;
                vertical-align: middle;

                html.no-touch &:hover, &.hover {
                    opacity: 0.5;
                }
            }

            > a + a {
                display: inline-block;
                margin-left: 1rem;
            }

            .pui-dialog-blank {
                margin-top: 2px;
            }
        }
    }

    &[type*="alert"], &[type*="confirm"], &[type*="prompt"] {
        width: 80%;
        left: 10%; 
        top: 40%;
        overflow: hidden;
    }

    > .pui-btn-center  {
        border-radius: 0;
        text-align: center; 
        padding: 12px 0;

        > .pui-btn + .pui-btn {
            margin-left: 8px;
        }
    }

    > .pui-btn-group-justify {
        width: 100%;
        padding: 0;
        margin: 0;

        > .pui-btn { 
            float:none;
            @include border-radius(0);
            border: none;
            border-top: 1px solid #eee;
            padding-left: 0;
            padding-right: 0;
            margin: 0;
        }
    }

    &.pui-radius > .pui-btn-group-justify > .pui-btn {
        @include border-bottom-left-radius(4px);
        @include border-bottom-right-radius(4px);
    } 

    &[type*="confirm"], &[type*="prompt"] {
        > .pui-btn-group {
            > .pui-btn {
                border-bottom: 0;
                border-color: #eee;
                margin: 0;

                &:first-child {
                    border-left: none;
                    @include border-top-left-radius(0);
                }

                &:last-child {
                    border-right: none;
                    @include border-top-right-radius(0);
                }
            }

            > .pui-btn + .pui-btn {
                margin-left: -1px;
                border-left: 1px solid #eee;
            }
        }
    }

    &[type*="prompt"] {
        > section > input[type="text"] {
            @include border-radius(0); 
        }

        &.pui-radius > section > input[type="text"] {
            border-radius: 4px; 
        }
    }

    &[type="loading"], &[type="table"] { 
        padding: 0;
        display: table;

        > section { 
            display : table-cell;
            text-align: center;
            vertical-align: middle; 
        }
    }

    > .pui-dialog-nav {
        width: 100%;
        display: table;
        padding: 0 1rem 1rem 1rem;

        > a {
            display: table-cell;
            text-align: center;
        }
    }
}

.pui-dialog-dock {
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 10px 10px 5px;
    width: 100%;
    background: #000 rgba(0, 0, 0, 0.5);
    background: #fff;
    z-index: 10001;
    overflow: hidden;
    box-shadow: 0 -3px 5px rgba(0, 0, 0, 0.2);

    > a {
        display: inline-block;
        padding: 5px 12px;
        border: 1px solid #ddd;
        margin-bottom: 4px;
        background: #fff;
    }
}

@media (min-width: 301px) and (max-width: 640px) {   
    .pui-dialog {
        &[type*="alert"], &[type*="prompt"], &[type*="confirm"] {
            width: 60%;
            left: 20%;
        }
    }
}

@media (min-width: 641px) and (max-width: 768px) {
    .pui-dialog {
        &[type*="alert"], &[type*="prompt"], &[type*="confirm"] {
            width: 48%;
            left: 26%;
        }
    }
}

@media (min-width: 769px) and (max-width: 1024px) { 
    .pui-dialog {
        &[type*="alert"], &[type*="prompt"], &[type*="confirm"] {
            width: 32%;
            left: 34%;
        }
    }
}

@media (min-width: 1025px) and (max-width: 1440px)  {
    .pui-dialog {
        &[type*="alert"], &[type*="prompt"], &[type*="confirm"] {
            width: 20%;
            left: 40%;
        }
    }
}

@media (min-width: 1441px) {
    .pui-dialog {
        &[type*="alert"], &[type*="prompt"], &[type*="confirm"] {
            width: 16%;
            left: 42%;
        }
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),  
       only screen and (min-device-pixel-ratio: 2) {

    .pui-dialog {
        .pui-btn-group-justify {
            > .pui-btn {
                padding-top: 0.8rem;
                padding-bottom: 0.8rem;
                font-size: 1.6rem;
                font-weight: normal;
            }
        }
    }

}

